<template>
    <div class="container" :style="theme">
        <ul class="topButtonBox">
            <li v-for="item in props.data.tab" 
                :key="item.type" 
                class="topButtonItem"
                @click="selContent(item.type)"
                :style="isSel === item.type?'color: #409EFF':''"
                >
                {{ item.name }}
            </li>
        </ul>
        <div class="line" :style="getLineWidth"></div>
        <ul class="contentBox">
            <template v-if="list.toDay.length">
                <li class="titleLi">今天</li>
                <li v-for="item in list.toDay" 
                    :key="item.kid" 
                    class="contenLi"
                    :style="isSel === props.data.tab[2].type?'flex-direction: row-reverse':'flex-direction: row'"
                >
                    <content-item   
                        :cover="item.cover?item.cover:item.covers[0]" 
                        :duration="item.duration" 
                        :name="item.author_name" 
                        :badge="item.badge"
                        :title="item.title"
                        :progress="item.progress"
                        :view_at="item.view_at"
                        >
                    </content-item>
                    
                </li>
            </template>
            <template v-if="list.yeDay.length">
                <li class="titleLi">昨天</li>
                <li v-for="item in list.yeDay" 
                    :key="item.kid" 
                    class="contenLi"
                    :style="isSel === props.data.tab[2].type?'flex-direction: row-reverse':'flex-direction: row'"
                >
                <content-item   
                        :cover="item.cover?item.cover:item.covers[0]" 
                        :duration="item.duration" 
                        :name="item.author_name" 
                        :badge="item.badge"
                        :title="item.title"
                        :progress="item.progress"
                        :view_at="item.view_at"
                        >
                    </content-item>
                </li>
            </template>
            <template v-if="list.agoDay.length">
                <li class="titleLi">更早</li>
                <li v-for="item in list.agoDay" 
                    :key="item.kid" 
                    class="contenLi"
                    :style="isSel === props.data.tab[2].type?'flex-direction: row-reverse':'flex-direction: row'"
                >
                    <content-item   
                        :cover="item.cover?item.cover:item.covers[0]" 
                        :duration="item.duration" 
                        :name="item.author_name" 
                        :badge="item.badge"
                        :title="item.title"
                        :progress="item.progress"
                        :view_at="item.view_at"
                        >
                    </content-item>

                </li>
            </template>
        </ul>
    </div>
</template>

<script lang="ts" setup>
import { watch,reactive,ref,onUpdated,computed,Ref } from 'vue'
import  contentItem from './components/contentItem.vue'
import { dayjs } from 'element-plus'
import { getThemes,resType } from '@/hooks/theme'
import { useRouter } from 'vue-router'

interface tab{
    type:string,
    name:string
}
interface item{
    kid:number,         //索引id
    author_name:string, //作者
    badge:string,       //live是否开播/专栏
    cover:string,       //展示图片
    duration:number,    //时长
    progress:number,    //看了多久
    view_at:number      //多久看的
}
interface DataArray{
    toDay:[item],
    yeDay:[item],
    agoDay:[item],
}
interface Props {
    data:{
        list:Array<item>,
        tab:[{
            type:string,
            name:string
        }]
    }
}
const props = defineProps<Props>()
const isSel = ref<string>()
const emits = defineEmits(['getHistory'])
const router = useRouter()
let theme: Ref<resType> = ref(getThemes(router.currentRoute.value.name as string))

onUpdated(() => {
    if(!isSel.value){
        isSel.value = props.data?.tab[0].type
    }
})
const list = reactive({
    toDay:[],
    yeDay:[],
    agoDay:[]
})
function selContent(type:string){
    isSel.value = type
    emits('getHistory',type)
    clearList()
}
//清空数组缓存
function clearList(){
    list.toDay.splice(0,list.toDay.length)
    list.yeDay.splice(0,list.yeDay.length)
    list.agoDay.splice(0,list.agoDay.length)
}
//弹出层触发时
function clearAllData(){
    isSel.value = ''
    clearList()
}
const getLineWidth = computed(() => {
    if(props.data?.tab) {
        if (isSel.value === props.data?.tab[0].type || !isSel.value) {
        return { 'left':'0' }
        } else if (isSel.value === props.data?.tab[1].type) {
            return { 'left':'33.3%' }
        } else {
            return { 'left':'66.6%' }
        }
    }
    return ''
})
watch(() => props.data, (val:any) => {
    let toDayTime = dayjs().startOf('d').unix()
    let yeDayTime = dayjs().startOf('d').unix()- 86400
    val?.list.forEach((el: item) => {
        if (el.view_at > toDayTime) list.toDay.push(el)
        else if (el.view_at > yeDayTime) list.yeDay.push(el)
        else list.agoDay.push(el)
    })
})
defineExpose({
    clearAllData
})
</script>

<style lang="scss" scoped>
@import url(../../assets/css/topPopSelBtn.scss);
$sysPopoverTitleColor: var(--titleColor);
$sysPopoverHoverLableColor: var(--hoverLableColor);
.topButtonBox{
    color: $sysPopoverTitleColor;
    border-bottom: 1px solid $sysPopoverHoverLableColor;
}
ul{
    padding: 0;
    margin: 0;
    list-style: none;
}
.container{
    height: 500px;
    position: relative;
}
.contentBox{
    width: 100%;
    height: 90%;
    @include scrollBar;
}
.titleLi{
    display: flex;
    line-height: 16px;
    font-size: 16px;
    margin: 10px 0 10px 12px;
    color: $sysPopoverTitleColor;
}
.contenLi{
    display: flex;
    padding-left: 10px;
    justify-content: space-between;
    align-items: center;
    box-sizing: border-box;
    width: 100%;
    border-radius: 4px;
    transition: all .3s;
    cursor: pointer;
    &:hover{
        background-color: $sysPopoverHoverLableColor;
    }
}
</style>